<template>
  <div class="nature-add-or-edit">
    <el-form label-position="left" inline class="demo-table-expand">
      <el-form-item label="上传贴图">
          <img style="height: 120px;" :src="src" alt="">
          <!-- <ossUpload
            :src="src"
            dirName="Natures"
            :imgName="randomName"
            @upload-img="handlerUpload"></ossUpload> -->
      </el-form-item>
      <el-form-item label="中文名称">
          <el-input v-model="name" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="英文名称">
          <el-input v-model="alis" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item label="类别">
          <el-select v-model="type" placeholder="请选择">
              <el-option
                      v-for="item in tabs"
                      :key="item.type"
                      :label="item.label"
                      :value="item.type">
              </el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="等级">
          <el-input-number v-model="level"></el-input-number>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="addItem" :loading="loading">确定</el-button>
  </div>
</template>

<script>
  // import ossUpload from '@/components/ossUpload.vue';
  import md5 from 'md5-js';

  export default {
    data () {
      return {
        version: '',
        name: '',
        alis: '',
        tabs: [{
            label: '材料',
            type: 33
          }, {
            label: '装备',
            type: 34
          }, {
            label: '树苗',
            type: 35
        }],
        loading: false,
        type: null,
        desc: '',
        console: '',
        features: [],
        composites: [''],
        src: '',
        composition: [],
        priority: null,
        itemDetailData: {},
        booleans: [
          {
            label: '是',
            value: true
          }, {
            label: '否',
            value: false
        }],
        origins: [''],
        createSciences: [''],
        level: 0
      }
    },
    components: {
      // ossUpload
    },
    computed:{
        randomName(){
            let time = new Date();
            return 'S_' + md5(time);
        },
        skin () {
          return this.$route.query.skin
        }
    },
    async activated() {
        await this.fetchDetail();
        this.init()
    },
    methods: {
        init () {
          this.level = this.itemDetailData.level || 0
          this.version = this.itemDetailData.version || ''
          this.src = this.itemDetailData.src || ''
          this.name = this.itemDetailData.name || ''
          this.alis = this.itemDetailData.alis || ''
          this.type = this.itemDetailData.type || null
        },
        addItem(){
            this.loading = true;
            const status = this.skin._id ? 'update' : 'add'
            this.axios.post(`skin/${status}`,{
                src : this.src,
                name : this.name,
                type : this.type,
                level: this.level,
                alis: this.alis
            })
                .then(res=>{
                    this.loading = false;
                    if(res.data.code === 0){
                        this.$router.push('/skin-list');
                    }else{
                        this.$message.error(res.data.message);
                    }
                })
        },
        handlerUpload (src){
            this.src = src;
        },
        addCreateScience () {
          this.createSciences.push('')
        },
        reduceCreateScience (index) {
          this.createSciences.splice(index, 1)
        },
        addOrigin () {
          this.origins.push('')
        },
        reduceOrigin (index) {
          this.origins.splice(index, 1)
        },
        fetchDetail() {
            this.itemDetailData = this.skin;
        }
    }
  }
</script>

<style lang="scss">
    .nature-add-or-edit{
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 120px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 16px;
            width: 50%;
        }
    }
</style>
<style lang="scss" scoped>
.nature-add-or-edit{
    padding: 16px;
    .delete-button, .add-button {
      display: inline-block;
      width: 60px;
      flex-shrink: 0;
    }
    .material {
      margin-bottom: 10px;
    }
    .attr-container {
      display: flex;
      height: 50px;
    }
}
</style>
